<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 青南学长平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6ab1f7;
            --primary-light: #a8d0fe;
            --secondary: #4a8bc9;
            --accent: #8ec5fc;
            --text: #2c3e50;
            --text-light: #6c757d;
            --background: #f0f8ff;
            --white: #ffffff;
            --card-shadow: 0 8px 20px rgba(106, 177, 247, 0.15);
            --hover-shadow: 0 12px 30px rgba(106, 177, 247, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            color: var(--primary);
            font-size: 28px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        
        .nav-links {
            display: flex;
            gap: 25px;
        }
        
        .nav-link {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
            position: relative;
        }
        
        .nav-link:hover {
            color: var(--primary);
        }
        
        .nav-link.active {
            color: var(--primary);
        }
        
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 用户中心内容区域 */
        .user-center-section {
            padding: 40px 0;
            flex: 1;
        }
        
        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .page-title i {
            color: var(--primary-light);
        }
        
        .user-center-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
        }
        
        .profile-card, .edit-card {
            background: var(--white);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            height: fit-content;
        }
        
        .profile-card {
            text-align: center;
        }
        
        .avatar-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
        }
        
        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--primary-light);
        }
        
        .avatar-edit {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .avatar-edit:hover {
            background: var(--secondary);
            transform: scale(1.1);
        }
        
        .user-name {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--primary);
        }
        
        .user-role {
            display: inline-block;
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .role-teacher {
            background-color: rgba(106, 177, 247, 0.2);
            color: var(--secondary);
        }
        
        .role-student {
            background-color: rgba(142, 197, 252, 0.3);
            color: #2c6fb0;
        }
        
        .user-info {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .info-icon {
            width: 20px;
            text-align: center;
            color: var(--primary);
        }
        
        .info-label {
            font-weight: 500;
            min-width: 80px;
            text-align: left;
        }
        
        .info-value {
            flex: 1;
            text-align: left;
        }
        
        .edit-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .edit-title i {
            color: var(--primary-light);
        }
        
        .edit-form {
            width: 100%;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .form-input {
            width: 100%;
            padding: 14px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-light);
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .gender-options {
            display: flex;
            gap: 20px;
        }
        
        .gender-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        
        .gender-option input[type="radio"] {
            display: none;
        }
        
        .gender-custom-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .gender-custom-radio::after {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--primary);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .gender-option input[type="radio"]:checked + .gender-custom-radio {
            border-color: var(--primary);
        }
        
        .gender-option input[type="radio"]:checked + .gender-custom-radio::after {
            opacity: 1;
        }
        
        .gender-option span {
            color: var(--text);
        }
        
        .region-selectors {
            display: flex;
            gap: 10px;
        }
        
        .region-selectors select {
            flex: 1;
            padding: 14px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
        }
        
        .region-selectors select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .region-selectors select:disabled {
            background-color: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
        }
        
        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        .save-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .save-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        .cancel-button {
            background: #f8f9fa;
            color: var(--text-light);
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .cancel-button:hover {
            background: #e9ecef;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--white);
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--primary-light);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-link:hover {
            color: var(--primary);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 968px) {
            .user-center-container {
                grid-template-columns: 1fr;
            }
            
            .nav-links {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .region-selectors {
                flex-direction: column;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap logo-icon"></i>
                    <span class="logo-text">青南学长</span>
                </div>
                
                <div class="nav-links">
                    <a href="index.html" class="nav-link">返回首页</a>
                    <!--<a href="user-center.html" class="nav-link active">用户中心</a>
                    <a href="#" class="nav-link">我的收藏</a>
                    <a href="#" class="nav-link">消息中心</a>-->
                </div>
            </div>
        </div>
    </header>

    <!-- 用户中心内容区域 -->
    <section class="user-center-section">
        <div class="container">
            <h1 class="page-title">
                <i class="fas fa-user-cog"></i>
                用户中心
            </h1>
            
            <div class="user-center-container">
                <!-- 左侧个人信息卡片 -->
                <div class="profile-card">
                    <div class="avatar-container">
                        <img src="./temeplates/images/avatar/3.png" alt="用户头像" class="avatar" id="user-avatar">
                        <div class="avatar-edit" id="avatar-edit-button">
                            <i class="fas fa-camera"></i>
                        </div>
                    </div>
                    
                    <h2 class="user-name" id="user-name">张老师</h2>
                    <div class="user-role role-teacher" id="user-role">教师</div>
                    
                    <div class="user-info">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-label">地区</div>
                            <div class="info-value" id="user-region">北京市 海淀区</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            <div class="info-label">IP所在地</div>
                            <div class="info-value" id="user-ip">北京</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="info-label">QQ邮箱</div>
                            <div class="info-value" id="user-email">123456@qq.com</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="info-label">手机号</div>
                            <div class="info-value" id="user-phone">138****5678</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-venus-mars"></i>
                            </div>
                            <div class="info-label">性别</div>
                            <div class="info-value" id="user-gender">男</div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧编辑卡片 -->
                <div class="edit-card">
                    <h2 class="edit-title">
                        <i class="fas fa-edit"></i>
                        编辑个人信息
                    </h2>
                    
                    <form class="edit-form">
                        <div class="form-group">
                            <label class="form-label" for="edit-name">称呼</label>
                            <input type="text" id="edit-name" class="form-input" placeholder="请输入您的称呼" value="张老师">
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="edit-email">QQ邮箱</label>
                                <div class="input-with-icon">
                                    <input type="email" id="edit-email" class="form-input" placeholder="请输入QQ邮箱" value="123456@qq.com">
                                    <i class="fas fa-envelope input-icon"></i>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label" for="edit-phone">手机号</label>
                                <div class="input-with-icon">
                                    <input type="tel" id="edit-phone" class="form-input" placeholder="请输入手机号" value="13800135678">
                                    <i class="fas fa-phone input-icon"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">性别</label>
                                <div class="gender-options">
                                    <label class="gender-option">
                                        <input type="radio" name="gender" value="male" checked>
                                        <span class="gender-custom-radio"></span>
                                        <span>男</span>
                                    </label>
                                    <label class="gender-option">
                                        <input type="radio" name="gender" value="female">
                                        <span class="gender-custom-radio"></span>
                                        <span>女</span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label" for="edit-role">身份</label>
                                <select id="edit-role" class="form-input">
                                    <option value="teacher" selected>教师</option>
                                    <option value="student">学生</option>
                                </select>
                            </div>
                        </div>
                        

                        <div class="form-group">
                            <label class="form-label">常住地区</label>
                            <div class="region-selectors">
                                <select id="edit-province">
                                    <option value="beijing" selected>北京市</option>
                                    <option value="shanghai">上海市</option>
                                    <option value="guangdong">广东省</option>
                                    <option value="zhejiang">浙江省</option>
                                </select>
                                
                                <select id="edit-city">
                                    <option value="beijing" selected>北京市</option>
                                </select>
                                
                                <select id="edit-district">
                                    <option value="haidian" selected>海淀区</option>
                                    <option value="chaoyang">朝阳区</option>
                                    <option value="xicheng">西城区</option>
                                    <option value="dongcheng">东城区</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="button" class="save-button" id="save-button">
                                <i class="fas fa-save"></i>
                                保存更改
                            </button>
                            <button type="button" class="cancel-button" id="cancel-button">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>青南学长平台</span>
                </div>
                
                <div class="footer-links">
                    <a href="about.html" class="footer-link">关于我们</a>
                    <a href="about.html" class="footer-link">联系我们</a>
                    <a href="provisions.html" class="footer-link">隐私政策</a>
                    <a href="provisions.html" class="footer-link">使用条款</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2025 青南学长平台 - 为学习和教育搭建桥梁
            </div>
        </div>
    </footer>

    <script>
        // 模拟用户数据 - 在实际应用中，这些数据应该从后端API获取
        let userData = {
            id: 1,
            name: "张老师",
            role: "teacher",
            avatar: "./temeplates/images/avatar/3.png",
            region: {
                province: "beijing",
                city: "beijing",
                district: "haidian"
            },
            ipLocation: "北京",
            email: "123456@qq.com",
            phone: "13800135678",
            gender: "male"
        };

        // 省市区数据 - 在实际应用中，这些数据应该从后端API获取
        const regionData = {
            beijing: {
                name: "北京市",
                cities: {
                    beijing: {
                        name: "北京市",
                        districts: {
                            dongcheng: "东城区",
                            xicheng: "西城区",
                            chaoyang: "朝阳区",
                            fengtai: "丰台区",
                            shijingshan: "石景山区",
                            haidian: "海淀区"
                        }
                    }
                }
            },
            shanghai: {
                name: "上海市",
                cities: {
                    shanghai: {
                        name: "上海市",
                        districts: {
                            huangpu: "黄浦区",
                            xuhui: "徐汇区",
                            changning: "长宁区",
                            jingan: "静安区",
                            putuo: "普陀区",
                            hongkou: "虹口区"
                        }
                    }
                }
            },
            guangdong: {
                name: "广东省",
                cities: {
                    guangzhou: {
                        name: "广州市",
                        districts: {
                            yuexiu: "越秀区",
                            liwan: "荔湾区",
                            haizhu: "海珠区",
                            tianhe: "天河区",
                            baiyun: "白云区",
                            huangpu: "黄埔区"
                        }
                    },
                    shenzhen: {
                        name: "深圳市",
                        districts: {
                            luohu: "罗湖区",
                            futian: "福田区",
                            nanshan: "南山区",
                            baoan: "宝安区",
                            longgang: "龙岗区",
                            yantian: "盐田区"
                        }
                    }
                }
            },
            zhejiang: {
                name: "浙江省",
                cities: {
                    hangzhou: {
                        name: "杭州市",
                        districts: {
                            shangcheng: "上城区",
                            xiacheng: "下城区",
                            jianggan: "江干区",
                            gongshu: "拱墅区",
                            xihu: "西湖区",
                            binjiang: "滨江区"
                        }
                    }
                }
            }
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化用户数据
            initializeUserData();
            
            // 头像编辑按钮点击事件
            document.getElementById('avatar-edit-button').addEventListener('click', function() {
                alert('头像上传功能开发中');
                // 在实际应用中，这里应该打开文件选择对话框
                // 并上传头像到服务器
            });
            
            // 保存按钮点击事件
            document.getElementById('save-button').addEventListener('click', function() {
                saveUserData();
            });
            
            // 取消按钮点击事件
            document.getElementById('cancel-button').addEventListener('click', function() {
                resetFormData();
            });
            
            // 省份选择变化事件
            document.getElementById('edit-province').addEventListener('change', function() {
                updateCityOptions();
            });
            
            // 城市选择变化事件
            document.getElementById('edit-city').addEventListener('change', function() {
                updateDistrictOptions();
            });
        });

        // 初始化用户数据
        function initializeUserData() {
            // 设置用户基本信息
            document.getElementById('user-avatar').src = userData.avatar;
            document.getElementById('user-name').textContent = userData.name;
            document.getElementById('user-role').textContent = userData.role === 'teacher' ? '教师' : '学生';
            document.getElementById('user-email').textContent = userData.email;
            document.getElementById('user-phone').textContent = userData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            document.getElementById('user-gender').textContent = userData.gender === 'male' ? '男' : '女';
            document.getElementById('user-ip').textContent = userData.ipLocation;
            
            // 设置地区信息
            const provinceName = regionData[userData.region.province].name;
            const cityName = regionData[userData.region.province].cities[userData.region.city].name;
            const districtName = regionData[userData.region.province].cities[userData.region.city].districts[userData.region.district];
            document.getElementById('user-region').textContent = `${provinceName} ${cityName} ${districtName}`;
            
            // 设置表单数据
            document.getElementById('edit-name').value = userData.name;
            document.getElementById('edit-email').value = userData.email;
            document.getElementById('edit-phone').value = userData.phone;
            document.getElementById('edit-role').value = userData.role;
            
            // 设置性别选择
            const genderRadio = document.querySelector(`input[name="gender"][value="${userData.gender}"]`);
            if (genderRadio) {
                genderRadio.checked = true;
            }
            
            // 设置地区选择
            initializeRegionSelectors();
        }

        // 初始化地区选择器
        function initializeRegionSelectors() {
            const provinceSelect = document.getElementById('edit-province');
            const citySelect = document.getElementById('edit-city');
            const districtSelect = document.getElementById('edit-district');
            
            // 填充省份选项
            provinceSelect.innerHTML = '';
            for (const provinceId in regionData) {
                const option = document.createElement('option');
                option.value = provinceId;
                option.textContent = regionData[provinceId].name;
                if (provinceId === userData.region.province) {
                    option.selected = true;
                }
                provinceSelect.appendChild(option);
            }
            
            // 更新城市选项
            updateCityOptions();
            
            // 更新区县选项
            updateDistrictOptions();
        }

        // 更新城市选项
        function updateCityOptions() {
            const provinceSelect = document.getElementById('edit-province');
            const citySelect = document.getElementById('edit-city');
            const districtSelect = document.getElementById('edit-district');
            
            const provinceId = provinceSelect.value;
            
            // 清空城市和区县选项
            citySelect.innerHTML = '';
            districtSelect.innerHTML = '';
            
            if (provinceId && regionData[provinceId]) {
                // 添加城市选项
                const cities = regionData[provinceId].cities;
                for (const cityId in cities) {
                    const option = document.createElement('option');
                    option.value = cityId;
                    option.textContent = cities[cityId].name;
                    
                    // 如果这是用户原来的城市，选中它
                    if (provinceId === userData.region.province && cityId === userData.region.city) {
                        option.selected = true;
                    }
                    
                    citySelect.appendChild(option);
                }
            }
            
            // 更新区县选项
            updateDistrictOptions();
        }

        // 更新区县选项
        function updateDistrictOptions() {
            const provinceSelect = document.getElementById('edit-province');
            const citySelect = document.getElementById('edit-city');
            const districtSelect = document.getElementById('edit-district');
            
            const provinceId = provinceSelect.value;
            const cityId = citySelect.value;
            
            // 清空区县选项
            districtSelect.innerHTML = '';
            
            if (provinceId && cityId && regionData[provinceId] && regionData[provinceId].cities[cityId]) {
                // 添加区县选项
                const districts = regionData[provinceId].cities[cityId].districts;
                for (const districtId in districts) {
                    const option = document.createElement('option');
                    option.value = districtId;
                    option.textContent = districts[districtId];
                    
                    // 如果这是用户原来的区县，选中它
                    if (provinceId === userData.region.province && 
                        cityId === userData.region.city && 
                        districtId === userData.region.district) {
                        option.selected = true;
                    }
                    
                    districtSelect.appendChild(option);
                }
            }
        }

        // 保存用户数据
        function saveUserData() {
            const name = document.getElementById('edit-name').value.trim();
            const email = document.getElementById('edit-email').value.trim();
            const phone = document.getElementById('edit-phone').value.trim();
            const role = document.getElementById('edit-role').value;
            const gender = document.querySelector('input[name="gender"]:checked').value;
            const province = document.getElementById('edit-province').value;
            const city = document.getElementById('edit-city').value;
            const district = document.getElementById('edit-district').value;
            
            // 表单验证
            if (!name) {
                alert('请输入称呼');
                return;
            }
            
            if (!email) {
                alert('请输入QQ邮箱');
                return;
            }
            
            if (!email.endsWith('@qq.com')) {
                alert('请输入正确的QQ邮箱格式');
                return;
            }
            
            if (!phone) {
                alert('请输入手机号');
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                return;
            }
            
            if (!province || !city || !district) {
                alert('请选择完整的常住地区');
                return;
            }
            
            // 在实际应用中，这里应该发送数据到后端API
            // 这里只是模拟保存过程
            const saveButton = document.getElementById('save-button');
            saveButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
            saveButton.disabled = true;
            
            setTimeout(function() {
                // 更新用户数据
                userData.name = name;
                userData.email = email;
                userData.phone = phone;
                userData.role = role;
                userData.gender = gender;
                userData.region = {
                    province: province,
                    city: city,
                    district: district
                };
                
                // 更新显示的用户信息
                document.getElementById('user-name').textContent = userData.name;
                document.getElementById('user-role').textContent = userData.role === 'teacher' ? '教师' : '学生';
                document.getElementById('user-email').textContent = userData.email;
                document.getElementById('user-phone').textContent = userData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                document.getElementById('user-gender').textContent = userData.gender === 'male' ? '男' : '女';
                
                // 更新地区信息
                const provinceName = regionData[userData.region.province].name;
                const cityName = regionData[userData.region.province].cities[userData.region.city].name;
                const districtName = regionData[userData.region.province].cities[userData.region.city].districts[userData.region.district];
                document.getElementById('user-region').textContent = `${provinceName} ${cityName} ${districtName}`;
                
                // 恢复保存按钮
                saveButton.innerHTML = '<i class="fas fa-save"></i> 保存更改';
                saveButton.disabled = false;
                
                alert('个人信息更新成功！');
            }, 1500);
        }

        // 重置表单数据
        function resetFormData() {
            document.getElementById('edit-name').value = userData.name;
            document.getElementById('edit-email').value = userData.email;
            document.getElementById('edit-phone').value = userData.phone;
            document.getElementById('edit-role').value = userData.role;
            
            // 重置性别选择
            const genderRadio = document.querySelector(`input[name="gender"][value="${userData.gender}"]`);
            if (genderRadio) {
                genderRadio.checked = true;
            }
            
            // 重置地区选择
            initializeRegionSelectors();
            
            alert('表单已重置为原始数据');
        }
    </script>
</body>
</html>